<template>
	<div id="apply">
		<h2 class="text-info">申请版主</h2>
		<form id="apply_form" method="post" @submit.prevent="apply_submit">
			<table>
				<tr>
					<td><label for="a_forumName">版块名称</label></td>
					<td><input type="text" id="a_forum" v-model="a.forumName" class="form-control" /></td>
				</tr>
				<tr>
					<td><label for="a_forumContent">版块描述</label></td>
					<td><textarea id="a_forumContent" v-model="a.forumContent" class="form-control"></textarea></td>
				</tr>
				<tr>
					<td><label for="a_applyReason">申请理由</label></td>
					<td><textarea id="a_applyReason" v-model="a.applyReason" class="form-control"></textarea></td>
				</tr>

				<input type="submit" value="提交" class="btn btn-info" style="margin-top: 20px;" />
			</table>
		</form>
		<button id="checkApply" @click="checkApply">查看申请消息</button>
		<div v-if="flag">
			<table class="table ">
				<thead>
					<td>版块名称</td>
					<td>版块描述</td>
					<td>申请时间</td>
					<td>申请结果</td>
				</thead>
				<tr v-for="apply in applys" :key="apply.index">
					<td>{{apply.forumName}}</td>
					<td>{{apply.forumContent}}</td>
					<td>{{apply.applyTime}}</td>
					<td>{{apply.statusInfo}}</td>
					<td v-if="apply.status == 1"><button @click="promote(apply.id)">成为版主</button></td>
				</tr>

			</table>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				a: {},
				userId: '',
				applys: {},
				flag: false,
				
			}
		},
		created() {
			this.userId = this.$store.state.user[0].id;
			this.a.userId = this.userId;
			
			
		},

		methods: {
			apply_submit() {
				if(this.a.forumName != '' && this.a.forumContent != '' && this.a.applyReason != '') {
					this.a.applyTime = this.dateTime();
					this.$http.post('/api/apply', this.a,{}).then(data => {
						if(data.status == 200) {
							alert("申请已提交,请等候消息！");
						}
					}, err => {
						console.log(err);
					})
				}
			},
			getApply() {
				this.$http.get('/api/getApply', {
					params: {
						id: this.userId
					}
				}).then(data => {
					if(data.status == 200) {
						this.applys = data.body;
						this.changeStatus();
					}
				}, err => {
					console.log(err);
				})
			},
			changeStatus() {
				var p = this.applys;
				
				for(var i = 0; i < p.length; i++) {
					if(p[i].status == 0) {
						p[i].statusInfo = "申请中...";
					}
					if(p[i].status == 1) {
						p[i].statusInfo = "申请成功！"
					}
					if(p[i].status == 2) {
						p[i].statusInfo = "申请失败！";
					}
				}
				this.applys = p;

			},
			checkApply() {
				this.flag = !this.flag;
				if(this.flag ==true){
					this.getApply();
				}

			},
			dateTime() {
				var dt = new Date();
				var y = dt.getFullYear();
				var m = (dt.getMonth() + 1).toString().padStart(2, "0");
				var d = (dt.getDate()).toString().padStart(2, "0");
				return `${y}-${m}-${d}`
			},
			promote(id){
				
			},
		}
	}
</script>

<style scoped>
	#apply {
		margin: 0 auto
	}
	
	#apply_form {
		width: 300px;
		margin: 0 auto
	}
</style>